<script setup lang="ts">
import { ref } from 'vue'

// 搜索关键词
const searchQuery = ref('')

// 筛选选项
const filters = ref({
  stack: 'all', // 技术栈
  sort: 'popular' // 排序方式
})

// 技术栈选项
const techStacks = [
  { id: 'all', name: '全部' },
  { id: 'react', name: 'React' },
  { id: 'vue', name: 'Vue' },
  { id: 'angular', name: 'Angular' },
  { id: 'node', name: 'Node.js' },
  { id: 'python', name: 'Python' }
]

// 排序选项
const sortOptions = [
  { id: 'popular', name: '热度' },
  { id: 'newest', name: '最新' },
  { id: 'oldest', name: '最早' }
]

// 处理搜索
const handleSearch = () => {
  console.log('搜索:', searchQuery.value)
  // 这里可以添加搜索逻辑
}
</script>

<template>
  <div class="search-filter">
    <!-- 搜索区域 -->
    <div class="search-container">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索模板..." 
        class="search-input"
        @keyup.enter="handleSearch"
      />
      <button class="search-button" @click="handleSearch">
        🔍
      </button>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container">
      <!-- 技术栈筛选 -->
      <div class="filter-group">
        <label class="filter-label">技术栈:</label>
        <div class="filter-options">
          <button 
            v-for="stack in techStacks" 
            :key="stack.id"
            :class="['filter-option', filters.stack === stack.id ? 'active' : '']"
            @click="filters.stack = stack.id"
          >
            {{ stack.name }}
          </button>
        </div>
      </div>
      
      <!-- 排序方式 -->
      <div class="filter-group">
        <label class="filter-label">排序:</label>
        <div class="filter-options">
          <button 
            v-for="option in sortOptions" 
            :key="option.id"
            :class="['filter-option', filters.sort === option.id ? 'active' : '']"
            @click="filters.sort = option.id"
          >
            {{ option.name }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.search-filter {
  margin: 2rem 0;
}

.search-container {
  display: flex;
  margin-bottom: 1rem;
}

.search-input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px 0 0 8px;
  font-size: 0.95rem;
  outline: none;
}

.search-button {
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 0 1.5rem;
  cursor: pointer;
  font-size: 1rem;
}

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
  margin-right: 0.5rem;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-option {
  background-color: #f1f3f5;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: #555;
}

.filter-option.active {
  background-color: #4a6cf7;
  color: white;
  border-color: #4a6cf7;
}

@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
    gap: 1rem;
  }
}
</style> 